<template>
  <div>
    <div id="divs">
      <h1 @click="refresh">当前最新价:{{ stock_money }} (点击/F5 刷新)</h1>
    </div>
    <el-tabs v-model="activeName" @tab-click="aa">
      <el-tab-pane label="K型图" name="first">
        <div>
          <div id="chart-container" class="echart" style="width:100%; height: 400px;"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="买入" name="second">
        <h3 align="left">YOUR NAME：{{ myname }}</h3>
        <div class="mySell" style="width: 30%;height: 230px">
          <el-form v-loading="loading" :inline="true" :model="formInline2" class="demo-form-inline"
                   style="margin-top: 20px; ">
            <el-form-item label="股票代码">
              <el-input v-model="formInline2.stockCode" disabled placeholder="股票代码"></el-input>
            </el-form-item>

            <el-form-item label="最终报价">
              <el-input v-model="formInline2.newsum" disabled placeholder="最终报价"></el-input>
            </el-form-item>

            <el-form-item label="购买数量">
              <el-input-number v-model="formInline2.num" :min="0" style="width: 203px"
                               @change="handleChange"></el-input-number>
            </el-form-item>

            <el-form-item>
              <el-button style="width: 300px;background-color: red;border: black" type="primary" @click="buy">股 票 官 方
                买 入
              </el-button>

            </el-form-item>
          </el-form>
        </div>
        <div class="positionList" style="border: black 1px solid;width:37%;height: 500px">
          <h3>第 三 方 交 易 平 台</h3>
          <el-table
              :data="tableData2"
              height="400">
            <el-table-column
                label="卖出人"
                prop="nickName"
                width="60">
            </el-table-column>
            <el-table-column
                label="单价"
                prop="averagePrice"
                width="60">
            </el-table-column>
            <el-table-column
                label="数量"
                prop="num"
                width="60">
            </el-table-column>
            <el-table-column
                label="卖出时间"
                prop="createDate"
                width="70">
            </el-table-column>
            <el-table-column
                label="本股编号"
                prop="volumeCode"
                width="80">
            </el-table-column>
            <el-table-column
                label="操作"
                width="80">
              <template slot-scope="scope">
                <el-button
                    size="small"
                    type="info"
                    @click.native.prevent="openBuy(scope.row)">
                  OPEN
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="BuyOrSell" style="border: #bdbcbc 3px solid;width:350px;height: 500px">
          <h3>买五卖五</h3>
          <hr style="background-color: #bdbcbc;height: 2px;">
          <div style="height: 200px;">
            <p v-for="buy in buyFives" v-bind:key="buy.id" style="color: #42b983;text-align: left;margin-left: 20px">{{buy.name}}：价格:{{buy.sellPrice}} 数量:{{buy.buyNum}}</p>
<!--            <p style="color: #42b983;text-align: left;margin-left: 20px">买二：价格:{{this.buyFives[1].sellPrice}} 数量:{{this.buyFives[1].buyNum}}</p>-->
<!--            <p style="color: #42b983;text-align: left;margin-left: 20px">买三：价格:{{this.buyFives[2].sellPrice}} 数量:{{this.buyFives[2].buyNum}}</p>-->
<!--            <p style="color: #42b983;text-align: left;margin-left: 20px">买四：价格:{{this.buyFives[3].sellPrice}} 数量:{{this.buyFives[3].buyNum}}</p>-->
<!--            <p style="color: #42b983;text-align: left;margin-left: 20px">买五：价格:{{this.buyFives[4].sellPrice}} 数量:{{this.buyFives[4].buyNum}}</p>-->
          </div>
          <hr style="background-color: #bdbcbc;height: 2px;">
          <div>
            <p v-for="sell in sellFives" v-bind:key="sell.id" style="color: #42b983;text-align: left;margin-left: 20px">{{sell.name}}：价格:{{sell.sellPrice}} 数量:{{sell.buyNum}}</p>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="卖出" name="third">
        <h3 align="left">YOUR NAME：{{ myname }}</h3>
        <div class="mySell" style="width: 320px;height: 270px">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 20px; ">
            <el-form-item label="卖出编号">
              <el-input v-model="formInline.volumeCode" disabled placeholder="卖出编号"></el-input>
            </el-form-item>

            <el-form-item label="卖出数量">
              <el-input-number v-model="formInline.xvnum" :min="0" style="width: 203px"></el-input-number>
            </el-form-item>

            <el-form-item label="卖出单价">
              <el-input v-model="formInline.sellPrice" placeholder="卖出单价"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button style="width: 300px;background-color: red;border: black" type="danger" @click="Contracts">
                卖出
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="positionList" style="border: black 1px solid;width: 750px;height: 500px">
          <h3>我 的 持 仓 / 进 行 交 易</h3>
          <el-table
              :data="tableData"
              height="400">
            <el-table-column
                label="股票名称"
                prop="stockName"
                width="80">
            </el-table-column>
            <el-table-column
                label="买入编号"
                prop="volumeCode"
                width="175">
            </el-table-column>
            <el-table-column
                label="价格/股"
                prop="averagePrice"
                width="80">
            </el-table-column>
            <el-table-column
                label="数量"
                prop="num"
                width="50">
            </el-table-column>
            <el-table-column
                label="买入时间"
                prop="createDate"
                width="150">
            </el-table-column>
            <el-table-column
                label="操作"
                width="70">
              <template slot-scope="scope">
                <el-button
                    size="small"
                    type="info"
                    @click.native.prevent="onSell(scope.row)">
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="分时图" name="fourth">分时图</el-tab-pane>
    </el-tabs>

    <!-- 第三方交易平台打开后 -->
    <el-dialog :visible.sync="dialogFormVisible2" style="width: 1200px;height: 1500px" title="我 的 交 易">
      <el-form :model="myThree">
        <el-form-item label="购买数量">
          <el-input-number v-model="myThree.buyNum" :max="this.gonum" :min="0" style="width: 203px"></el-input-number>
        </el-form-item>
        <el-form-item label="购买价格">
          <el-input v-model="myThree.buyPrice" placeholder="购买价格" style="width: 203px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="onBuy()">提 交 信 息</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
import * as echarts from "echarts";

export default {
  name: "StashView",
  data() {
    return {
      //2属性定义
      aa: '',
      form: {},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      stock_money: '',
      activeName: 'first',
      newsum: '',
      stockCode: '',
      upcolor: "#FF0000", //增长颜色
      upBorderColor: "#8A0000",
      downColor: "#008000", // 下跌颜色
      downBorderColor: "#008F28",
      klineData: [],//k线图数据,
      formInline: {xvnum: 0},
      myname: sessionStorage.getItem("myname"),
      tableData: [],
      tableData2: [],
      formInline2: {num: 0},
      dialogFormVisible2: false,
      myThree: {},
      gonum: '',
      loading: '',
      receivedData: '',
      socket: null,
      title: '',
      buyFives:[],
      sellFives:[],
    }
  },
  mounted() {
    this.initData();
    this.initEcharts();
  },
  methods: {
    Contracts() {
      this.axios.post("/stockservice/position/contracts", this.formInline).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg);
          this.myPosition();
          this.formInline = {};
          this.mySell();
          this.$router.push("/stash")
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    onSell(row) {
      this.formInline = row;
    },
    myPosition() {
      let stockId = sessionStorage.getItem("stock_id");
      this.axios.post("/stockservice/position/list?stockId=" + stockId).then(res => {
        this.tableData = res.data.data;
      })
    },
    mySell() {
      let stockId = sessionStorage.getItem("stock_id");
      this.axios.post("/stockservice/sell/allSellList?stockId=" + stockId).then(res => {
        this.tableData2 = res.data.data;
      })
    },
    openBuy(row) {
      this.dialogFormVisible2 = true;
      this.myThree = row;
      this.gonum = row.num;
    },
    onBuy() {
      this.myThree.stockId = sessionStorage.getItem("stock_id");
      this.axios.post("/stockservice/position/buyForThree", this.myThree).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg);
          this.refresh();
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    buy() {
      this.formInline2.stockId = sessionStorage.getItem("stock_id");
      this.loading = true;
      this.axios.post("/stockservice/stock/buy", this.formInline2).then(res => {
        if (res.data.code === 200) {
          this.loading = false;
          this.$message.success(res.data.msg)
          this.dialogFormVisible = false
          this.getNewmoney();
          this.refresh();
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    handleClick() {
      this.dialogFormVisible = true;
    },
    handleChange(value) {
      this.formInline2.newsum = this.stock_money * value;
    },
    getNewmoney() {
      var stockId = sessionStorage.getItem("stock_id");
      this.axios.post("/stockservice/stock/getNewmoney?id=" + stockId).then(res => {
        this.stock_money = res.data.data.latestPrice
        this.formInline2.stockCode = res.data.data.stockCode
        this.formInline2.newsum = this.stock_money;
      })
    },


    refresh() {
      location.reload();
      this.$router.go(0);
    },
    initData() {
      var SZlineData = [
        ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
        ['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
        ['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
        ['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
        ['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
        ['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
        ['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
        ['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
        ['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
        ['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
        ['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
        ['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
        ['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
        ['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
        ['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
        ['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
        ['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
        ['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
        ['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
        ['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
        ['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
        ['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
        ['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
        ['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
        ['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
        ['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
        ['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
        ['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
        ['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
        ['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
        ['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
        ['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
        ['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
        ['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
        ['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
        ['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
        ['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
        ['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
        ['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
        ['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
        ['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
        ['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
        ['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
        ['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
        ['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
        ['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
        ['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
        ['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
        ['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
        ['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26],
        ['2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99],
        ['2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43],
        ['2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51],
        ['2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03],
        ['2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11],
        ['2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12],
        ['2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62],
        ['2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12],
        ['2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63],
        ['2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58],
        ['2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65],
        ['2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81],
        ['2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07],
        ['2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26],
        ['2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21],
        ['2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86],
        ['2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67],
        ['2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85],
        ['2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93],
        ['2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19],
        ['2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87],
        ['2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09],
        ['2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39],
        ['2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3],
        ['2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18],
        ['2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95],
        ['2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59],
        ['2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7],
        ['2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1],
        ['2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33],
        ['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],
        ['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],
        ['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],
        ['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],
        ['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],
        ['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],
        ['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],
        ['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1]
      ];
      this.klineData = this.splitData(SZlineData);
    },
    initEcharts() {
      const option = {
        title: {
          text: "上证指数",
          left: 0
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["日K", "MA5", "MA10", "MA20", "MA30"]
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "15%"
        },
        xAxis: {
          type: "category",
          data: this.klineData.categoryData,
          boundaryGap: false,
          axisLine: {onZero: false},
          splitLine: {show: false},
          min: "dataMin",
          max: "dataMax"
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: 50,
            end: 100
          },
          {
            show: true,
            type: "slider",
            top: "90%",
            start: 50,
            end: 100
          }
        ],
        series: [
          {
            name: "日K",
            type: "candlestick",
            data: this.klineData.values,
            itemStyle: {
              color: this.upColor,
              color0: this.downColor,
              borderColor: this.upBorderColor,
              borderColor0: this.downBorderColor
            },
            markPoint: {
              label: {
                formatter: function (param) {
                  return param != null ? Math.round(param.value) + "" : "";
                }
              },
              data: [
                {
                  name: "Mark",
                  coord: ["2013/5/31", 2300],
                  value: 2300,
                  itemStyle: {
                    color: "rgb(41,60,85)"
                  }
                },
                {
                  name: "highest value",
                  type: "max",
                  valueDim: "highest"
                },
                {
                  name: "lowest value",
                  type: "min",
                  valueDim: "lowest"
                },
                {
                  name: "average value on close",
                  type: "average",
                  valueDim: "close"
                }
              ],
              tooltip: {
                formatter: function (param) {
                  return param.name + " " + (param.data.coord || "");
                }
              }
            },
            markLine: {
              symbol: ["none", "none"],
              data: [
                [
                  {
                    name: "from lowest to highest",
                    type: "min",
                    valueDim: "lowest",
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                      show: false
                    },
                    emphasis: {
                      label: {
                        show: false
                      }
                    }
                  },
                  {
                    type: "max",
                    valueDim: "highest",
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                      show: false
                    },
                    emphasis: {
                      label: {
                        show: false
                      }
                    }
                  }
                ],
                {
                  name: "min line on close",
                  type: "min",
                  valueDim: "close"
                },
                {
                  name: "max line on close",
                  type: "max",
                  valueDim: "close"
                }
              ]
            }
          },
          {
            name: "MA5",
            type: "line",
            data: this.calculateMA(5),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
              opacity: 0.8
            }
          },
          {
            name: "MA10",
            type: "line",
            data: this.calculateMA(10),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
              opacity: 0.8
            }
          },
          {
            name: "MA20",
            type: "line",
            data: this.calculateMA(20),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
              opacity: 0.8
            }
          },
          {
            name: "MA30",
            type: "line",
            data: this.calculateMA(30),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
              opacity: 0.8
            }
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("chart-container"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 数据计算以及拆分
    splitData(rawData) {
      const categoryData = [];
      const values = [];
      for (let i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
      }
      return {
        categoryData: categoryData,
        values: values
      };
    },
    // 均值计算
    calculateMA(dayCount) {
      const result = [];
      for (let i = 0, len = this.klineData.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        let sum = 0;
        for (let j = 0; j < dayCount; j++) {
          sum += +this.klineData.values[i - j][1];
        }
        // 保留两位小数
        result.push((sum / dayCount).toFixed(2));
      }
      return result;
    },
    buyFive(){
      let stockId = sessionStorage.getItem("stock_id");
      this.axios.post("http://localhost:8083/buy/buyFive?stockId="+stockId).then(res=>{
        this.buyFives=res.data;
      })
    },
    sellFive(){
      let stockId = sessionStorage.getItem("stock_id");
      this.axios.post("http://localhost:8083/sell/sellFive?stockId="+stockId).then(res=>{
        this.sellFives=res.data;
      })
    }
  }, created() {
    this.getNewmoney();
    this.myPosition();
    this.mySell();
    this.buyFive();
    this.sellFive();
  }
}
</script>

<style>
.BuyOrSell {
  margin-left: 1%;
  float: right;
}

#divs {
  position: relative;
  display: flex;
  justify-content: center;
  top: 1px;
  left: 1px;
  height: 90px;
  width: 320px;
}

.mySell {
  float: left;
}

.positionList {
  margin-left: 1%;
  float: left;
}
</style>